<template>
  <div class="intelligent-nav-layout">
    <!-- 智能导航系统 -->
    <div class="nav-sidebar" :class="{ 'nav-collapsed': isNavCollapsed }">
      <IntelligentNavSystem />
    </div>

    <!-- 主内容区域 -->
    <div class="main-content" :class="{ 'content-expanded': isNavCollapsed }">
      <!-- 顶部工具栏 -->
      <div class="top-toolbar">
        <div class="toolbar-left">
          <el-button 
            text 
            @click="toggleNav"
            class="nav-toggle-btn"
          >
            <el-icon>
              <component :is="isNavCollapsed ? 'Expand' : 'Fold'" />
            </el-icon>
          </el-button>
          
          <!-- 面包屑导航 -->
          <EnhancedBreadcrumb />
        </div>

        <div class="toolbar-center">
          <!-- 快速搜索 -->
          <div class="quick-search">
            <el-input
              v-model="quickSearchQuery"
              placeholder="快速搜索..."
              size="small"
              @keyup.enter="handleQuickSearch"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </div>

        <div class="toolbar-right">
          <!-- 通知中心 -->
          <el-button text @click="toggleNotifications">
            <el-icon><Bell /></el-icon>
            <el-badge v-if="notificationCount > 0" :value="notificationCount" class="notification-badge" />
          </el-button>

          <!-- AI助手 -->
          <el-button text @click="toggleAIAssistant">
            <el-icon><MagicStick /></el-icon>
          </el-button>

          <!-- 全屏切换 -->
          <el-button text @click="toggleFullscreen">
            <el-icon><FullScreen /></el-icon>
          </el-button>

          <!-- 用户菜单 -->
          <el-dropdown @command="handleUserCommand">
            <div class="user-avatar">
              <el-avatar :size="32" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">
                  <el-icon><User /></el-icon>
                  个人中心
                </el-dropdown-item>
                <el-dropdown-item command="settings">
                  <el-icon><Setting /></el-icon>
                  系统设置
                </el-dropdown-item>
                <el-dropdown-item divided command="logout">
                  <el-icon><SwitchButton /></el-icon>
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="content-area">
        <router-view v-slot="{ Component }">
          <transition name="page-fade" mode="out-in">
            <component :is="Component" v-if="Component" :key="$route.fullPath" />
          </transition>
        </router-view>
      </div>
    </div>

    <!-- 通知中心 -->
    <transition name="notification-slide">
      <div v-if="showNotificationPanel" class="notification-panel">
        <div class="notification-header">
          <h3>通知中心</h3>
          <el-button text @click="closeNotifications">
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
        <div class="notification-list">
          <div
            v-for="notification in notifications"
            :key="notification.id"
            class="notification-item"
            :class="{ unread: !notification.read }"
            @click="markAsRead(notification)"
          >
            <div class="notification-icon" :class="notification.type">
              <el-icon v-if="notification.type === 'success'"><CircleCheckFilled /></el-icon>
              <el-icon v-else-if="notification.type === 'warning'"><WarningFilled /></el-icon>
              <el-icon v-else><InfoFilled /></el-icon>
            </div>
            <div class="notification-content">
              <div class="notification-title">{{ notification.title }}</div>
              <div class="notification-message">{{ notification.message }}</div>
              <div class="notification-time">{{ notification.time }}</div>
            </div>
            <div v-if="!notification.read" class="unread-dot"></div>
          </div>
        </div>
      </div>
    </transition>

    <!-- AI助手面板 -->
    <transition name="ai-slide">
      <div v-if="showAIAssistant" class="ai-assistant-panel">
        <div class="ai-header">
          <div class="ai-info">
            <div class="ai-avatar">
              <el-icon><MagicStick /></el-icon>
            </div>
            <div>
              <div class="ai-title">AI助手</div>
              <div class="ai-status">在线</div>
            </div>
          </div>
          <el-button text @click="closeAIAssistant">
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
        <div class="ai-messages" ref="aiMessagesRef">
          <div
            v-for="(msg, index) in aiMessages"
            :key="index"
            class="ai-message"
            :class="msg.type"
          >
            <div v-if="msg.type === 'assistant'" class="msg-avatar">
              <el-icon><MagicStick /></el-icon>
            </div>
            <div class="msg-content">
              <div class="msg-text">{{ msg.text }}</div>
              <div class="msg-time">{{ formatTime(msg.timestamp) }}</div>
            </div>
          </div>
        </div>
        <div class="ai-input">
          <el-input
            v-model="aiInput"
            placeholder="输入消息..."
            @keyup.enter="sendAIMessage"
          >
            <template #suffix>
              <el-button text @click="sendAIMessage" :disabled="!aiInput.trim()">
                <el-icon><Promotion /></el-icon>
              </el-button>
            </template>
          </el-input>
        </div>
      </div>
    </transition>

    <!-- 遮罩层 -->
    <div v-if="showNotificationPanel || showAIAssistant" class="overlay" @click="closeAllPanels"></div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Expand, Fold, Search, Bell, MagicStick, FullScreen, User, Setting, SwitchButton,
  Close, CircleCheckFilled, WarningFilled, InfoFilled, Promotion
} from '@element-plus/icons-vue'
import IntelligentNavSystem from '@/components/Navigation/IntelligentNavSystem.vue'
import EnhancedBreadcrumb from '@/components/Navigation/EnhancedBreadcrumb.vue'

const router = useRouter()

// 响应式数据
const isNavCollapsed = ref(false)
const quickSearchQuery = ref('')
const showNotificationPanel = ref(false)
const showAIAssistant = ref(false)
const notificationCount = ref(3)
const aiInput = ref('')
const aiMessages = ref([])
const aiMessagesRef = ref(null)

// 通知数据
const notifications = ref([
  {
    id: 1,
    type: 'success',
    title: '系统通知',
    message: '欢迎使用智能ERP导航系统',
    time: '刚刚',
    read: false
  },
  {
    id: 2,
    type: 'warning',
    title: '待办提醒',
    message: '您有3个待办任务需要处理',
    time: '5分钟前',
    read: false
  },
  {
    id: 3,
    type: 'info',
    title: '系统更新',
    message: '系统已更新到最新版本',
    time: '1小时前',
    read: true
  }
])

// 计算属性
const unreadCount = computed(() => {
  return notifications.value.filter(n => !n.read).length
})

// 方法
const toggleNav = () => {
  isNavCollapsed.value = !isNavCollapsed.value
}

const handleQuickSearch = () => {
  if (quickSearchQuery.value.trim()) {
    // 执行快速搜索
    ElMessage.info(`搜索: ${quickSearchQuery.value}`)
    quickSearchQuery.value = ''
  }
}

const toggleNotifications = () => {
  showNotificationPanel.value = !showNotificationPanel.value
  if (showNotificationPanel.value) {
    showAIAssistant.value = false
  }
}

const closeNotifications = () => {
  showNotificationPanel.value = false
}

const toggleAIAssistant = () => {
  showAIAssistant.value = !showAIAssistant.value
  if (showAIAssistant.value) {
    showNotificationPanel.value = false
    // 初始化AI消息
    if (aiMessages.value.length === 0) {
      aiMessages.value.push({
        type: 'assistant',
        text: '您好！我是智能ERP导航系统的AI助手。我可以帮您快速找到需要的功能，或者回答您的问题。',
        timestamp: Date.now()
      })
    }
  }
}

const closeAIAssistant = () => {
  showAIAssistant.value = false
}

const closeAllPanels = () => {
  showNotificationPanel.value = false
  showAIAssistant.value = false
}

const markAsRead = (notification) => {
  notification.read = true
  notificationCount.value = unreadCount.value
}

const sendAIMessage = () => {
  if (!aiInput.value.trim()) return

  // 添加用户消息
  aiMessages.value.push({
    type: 'user',
    text: aiInput.value,
    timestamp: Date.now()
  })

  const userMessage = aiInput.value
  aiInput.value = ''

  // 滚动到底部
  scrollToBottom()

  // 模拟AI响应
  setTimeout(() => {
    aiMessages.value.push({
      type: 'assistant',
      text: `我理解您的需求："${userMessage}"。我可以帮您导航到相关功能，或者提供操作建议。`,
      timestamp: Date.now()
    })
    scrollToBottom()
  }, 1000)
}

const scrollToBottom = () => {
  setTimeout(() => {
    if (aiMessagesRef.value) {
      aiMessagesRef.value.scrollTop = aiMessagesRef.value.scrollHeight
    }
  }, 100)
}

const formatTime = (timestamp) => {
  return new Date(timestamp).toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}

const handleUserCommand = (command) => {
  switch (command) {
    case 'profile':
      router.push('/system/user-settings')
      break
    case 'settings':
      router.push('/system/settings')
      break
    case 'logout':
      ElMessageBox.confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 执行退出登录
        ElMessage.success('已退出登录')
        router.push('/login')
      }).catch(() => {})
      break
  }
}

// 键盘快捷键
const handleKeydown = (e) => {
  // Ctrl+K 打开命令面板
  if (e.ctrlKey && e.key === 'k') {
    e.preventDefault()
    // 可以在这里添加命令面板逻辑
  }
  // Ctrl+/ 全局搜索
  else if (e.ctrlKey && e.key === '/') {
    e.preventDefault()
    // 可以在这里添加全局搜索逻辑
  }
  // Ctrl+B 切换导航
  else if (e.ctrlKey && e.key === 'b') {
    e.preventDefault()
    toggleNav()
  }
}

onMounted(() => {
  document.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
})
</script>

<style scoped>
.intelligent-nav-layout {
  display: flex;
  height: 100vh;
  background: #f5f7fa;
  overflow: hidden;
}

.nav-sidebar {
  width: 320px;
  height: 100vh;
  background: white;
  border-right: 1px solid #e4e7ed;
  transition: all 0.3s ease;
  overflow: hidden;
}

.nav-sidebar.nav-collapsed {
  width: 0;
  border-right: none;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.content-expanded {
  margin-left: 0;
}

.top-toolbar {
  height: 60px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 20px;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-toggle-btn {
  color: #606266;
  transition: all 0.3s ease;
}

.nav-toggle-btn:hover {
  color: #409eff;
}

.toolbar-center {
  flex: 1;
  max-width: 400px;
}

.quick-search {
  width: 100%;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
}

.user-avatar {
  cursor: pointer;
  border-radius: 4px;
  padding: 4px;
  transition: all 0.2s ease;
}

.user-avatar:hover {
  background: #f5f7fa;
}

.content-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #f5f7fa;
}

/* 通知面板 */
.notification-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  height: 100vh;
  background: white;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.notification-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fafafa;
}

.notification-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.notification-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 12px;
  position: relative;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.notification-item:hover {
  background: #f5f7fa;
  border-color: #409eff;
}

.notification-item.unread {
  background: #ecf5ff;
  border-color: #409eff;
}

.notification-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notification-icon.success {
  background: rgba(103, 194, 58, 0.1);
  color: #67c23a;
}

.notification-icon.warning {
  background: rgba(230, 162, 60, 0.1);
  color: #e6a23c;
}

.notification-icon.info {
  background: rgba(64, 158, 255, 0.1);
  color: #409eff;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.notification-message {
  font-size: 13px;
  color: #606266;
  margin-bottom: 4px;
  line-height: 1.4;
}

.notification-time {
  font-size: 11px;
  color: #909399;
}

.unread-dot {
  width: 8px;
  height: 8px;
  background: #409eff;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

/* AI助手面板 */
.ai-assistant-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 400px;
  height: 600px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-header {
  padding: 16px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
}

.ai-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-avatar {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
}

.ai-status {
  font-size: 12px;
  opacity: 0.8;
}

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-message {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.ai-message.user {
  flex-direction: row-reverse;
}

.msg-avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.msg-content {
  max-width: 70%;
}

.ai-message.user .msg-content {
  text-align: right;
}

.msg-text {
  background: white;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ai-message.user .msg-text {
  background: #409eff;
  color: white;
}

.msg-time {
  font-size: 11px;
  color: #909399;
  margin-top: 4px;
  padding: 0 4px;
}

.ai-input {
  padding: 16px 20px;
  border-top: 1px solid #e4e7ed;
  background: white;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

/* 动画 */
.page-fade-enter-active,
.page-fade-leave-active {
  transition: all 0.3s ease;
}

.page-fade-enter-from {
  opacity: 0;
  transform: translateY(10px);
}

.page-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.notification-slide-enter-active,
.notification-slide-leave-active {
  transition: all 0.3s ease;
}

.notification-slide-enter-from {
  transform: translateX(100%);
}

.notification-slide-leave-to {
  transform: translateX(100%);
}

.ai-slide-enter-active,
.ai-slide-leave-active {
  transition: all 0.3s ease;
}

.ai-slide-enter-from {
  transform: translateY(100%) scale(0.9);
  opacity: 0;
}

.ai-slide-leave-to {
  transform: translateY(100%) scale(0.9);
  opacity: 0;
}

/* 响应式 */
@media (max-width: 768px) {
  .nav-sidebar {
    width: 100%;
    position: fixed;
    z-index: 1002;
  }
  
  .nav-sidebar.nav-collapsed {
    transform: translateX(-100%);
  }
  
  .ai-assistant-panel {
    width: calc(100vw - 40px);
    height: calc(100vh - 40px);
    bottom: 20px;
    right: 20px;
  }
  
  .notification-panel {
    width: 100vw;
  }
}

/* 暗黑模式 */
.dark .nav-sidebar {
  background: #1f1f1f;
  border-color: #3a3a3a;
}

.dark .top-toolbar {
  background: #1f1f1f;
  border-color: #3a3a3a;
}

.dark .content-area {
  background: #141414;
}

.dark .notification-panel {
  background: #1f1f1f;
}

.dark .notification-item {
  background: #2a2a2a;
  border-color: #3a3a3a;
}

.dark .ai-assistant-panel {
  background: #1f1f1f;
}

.dark .ai-messages {
  background: #141414;
}
</style>
